import {  type ComponentSize} from "element-plus";
import { ref, onMounted, reactive} from "vue";
//引入ts类型
import type {
  Record,
  TradMarkResponseData,
  TradMark,
} from "@/api/product/trademark/type";
//引入请求函数
import { reqHasTrademark } from "@/api/product/trademark";
//当前页码
let pageNo = ref<number>(1);
//定义每页显示多少条数据
let limit = ref<number>(3);
//定义分页器大小
const size = ref<ComponentSize>("large");
//存储已有品牌的总数
let total = ref<number>(0);
//存储已有品牌的数组
let trademarkArr = ref<Record>([]);
//控制对话框显示与隐藏
let dialogFormVisible = ref<boolean>(false);
//定义新增品牌数据
 let trademarkParams = reactive<TradMark>({
  tmName: "",
  logoUrl: "",
});
//获取form组件实例
let formRef =ref();
//发请求时间：
//1.页面挂载，默认请求第一页数据
//2.切换页码
//将请求封装为一个函数
const getHasTrademark = async (pager=1) => {
  pageNo.value = pager
  let result: TradMarkResponseData = await reqHasTrademark(pageNo.value, limit.value);
  console.log(result)
  if (result.code == 200) {
    total.value = result.data.total;
    trademarkArr.value = result.data.records;
  }
};
//组件挂在完毕钩子,获取默认第一页数据
onMounted(() => {
  getHasTrademark();
});
//分页器当前页码发生变化时触发
//@current-change="getHasTrademark"
//当下拉菜单发生变化后，触发自定义事件
// @size-change="sizeChange"
export {
    formRef,
    dialogFormVisible,
    trademarkParams, 
    trademarkArr,
    getHasTrademark,
    pageNo,
    limit,
    size,
    total,
}